import classes from './Counter.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'

import CartContext from '../../../store/cart-context.js'

import { useContext } from 'react';

const Counter = ({ meal }) => {
	const cartCtx = useContext(CartContext);

	const AddBtnHandler = () => {
		cartCtx.cartDispatch({ type: 'ADD_ITEM', meal: meal }); // 添加食物
	}

	const removeBtnHandler = () => {
		cartCtx.cartDispatch({ type: 'REMOVE_ITEM', meal: meal }); // 删除食物
	}

	return (
		<div className={classes.CounterBox}>
			<button
				className={`${classes.SubBtn} ${(meal.amount === undefined || meal.amount === 0) && classes.Hidden}`}
				onClick={removeBtnHandler}
			>
				<FontAwesomeIcon icon={faMinus} size="xs" />
			</button>

			<span className={`${classes.Counter} ${(meal.amount === undefined || meal.amount === 0) && classes.Hidden}`}>{meal.amount}</span>

			<button className={classes.AddBtn} onClick={AddBtnHandler}>
				<FontAwesomeIcon icon={faPlus} size="xs" />
			</button>
		</div>
	)
}

export default Counter